<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ignore (rows, cols, cells)</title>
    <link href="../dist/css/tableexport.min.css" rel="stylesheet">
    <link href="./examples.css" rel="stylesheet">
</head>
<body>
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-TL44T9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

<a id="example-link" href="./"> << Examples</a>

<iframe src="./defaults.html" frameborder="0" width="100%" scrolling="no" onload="this.height=screen.height/2.5;"></iframe>

<main>
    <h1>IgnoreRows
        <code class="small">ignoreRows: [0, 2]</code>
        <span class="note"> – <code>number|number[]</code></span>
    </h1>
    <table id="ignore-rows-table">
        <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr class="target">
            <td>Thor Walton</td>
            <td>Regional Director</td>
            <td>45</td>
            <td>$98,540</td>
        </tr>
        <tr>
            <td>Travis Clarke</td>
            <td>Software Engineer</td>
            <td>30</td>
            <td>$275,000</td>
        </tr>
        <tr class="target">
            <td>Suki Burks</td>
            <td>Office Manager</td>
            <td>22</td>
            <td>$67,670</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <th>$441,210</th>
        </tr>
        </tfoot>
    </table>

    <p class="info">export the table to <code>.xlsx</code> and look at the contents of the <span class="target">yellow</span> rows. Compared to the export from the <b>defaults</b> table above, you will notice that <code>ignoreRows: [0, 2]</code> <i>removes the <code>tbody</code> rows at index <b>zero(0)</b> and <b>two(2)</b></i>.</p>

    <p class="half">
        <b>NOTE:</b> reference <a href="./headers_footers.html#headers-table"><code>headers</code></a> and <a href="./headers_footers.html#footers-table"><code>footers</code></a> if you want to remove <code>thead</code> or <code>tfoot</code> rows.
    </p>

    <p class="half">
        <b>NOTE:</b> reference <a href="#ignore"><code>.tableexport-ignore</code></a>, <a href="#empty"><code>.tableexport-empty</code></a> if you want to customize the removal of <code>table</code> rows, columns, or cells.
    </p>

    <br>

</main>

<main>
    <h1>IgnoreCols
        <code class="small">ignoreCols: 1</code>
        <span class="note"> – <code>number|number[]</code></span>
    </h1>
    <table id="ignore-cols-table">
        <thead>
        <tr>
            <th>Name</th>
            <th class="target">Position</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Thor Walton</td>
            <td class="target">Regional Director</td>
            <td>45</td>
            <td>$98,540</td>
        </tr>
        <tr>
            <td>Travis Clarke</td>
            <td class="target">Software Engineer</td>
            <td>30</td>
            <td>$275,000</td>
        </tr>
        <tr>
            <td>Suki Burks</td>
            <td class="target">Office Manager</td>
            <td>22</td>
            <td>$67,670</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td class="disabled"></td>
            <td class="target"></td>
            <td class="disabled"></td>
            <th>$441,210</th>
        </tr>
        </tfoot>
    </table>

    <p class="info">export the table to <code>.xlsx</code> and look at the contents of the <span class="target">yellow</span> column. Compared to the export from the <b>defaults</b> table above, you will notice that <code>ignoreCols: 1</code> <i>removes the <code>tbody</code> column at index <b>one(1)</b></i>.</p>

    <p class="half">
        <b>NOTE:</b> reference <a href="#ignore"><code>.tableexport-ignore</code></a>, <a href="#empty"><code>.tableexport-empty</code></a> if you want to customize the removal of <code>table</code> rows, columns, or cells.
    </p>

    <br>

</main>

<main>
    <h1>Need control at the individual <b>cell</b> level?</h1>
    <ul>
        <li>
            <span id="ignore" class="ignore">&nbsp;&nbsp;&nbsp;&nbsp;</span><code>.tableexport-ignore</code>: add this class to a <code>tr</code>, <code>td</code>, or <code>th</code> to: <i>exclude/remove cells from the exported file(s).</i>
            <p class="note"><b>Caution:</b> this will shift the remaining cells.</p>
        </li>
        <br>
        <li><span id="empty" class="empty">&nbsp;&nbsp;&nbsp;&nbsp;</span><code>.tableexport-empty</code>: add this class to a <code>tr</code>, <code>td</code>, or <code>th</code> to: <i>replace cells with an empty string in the exported file(s).</i></li>
    </ul>
    <table id="ignore-cell-table">
        <thead>
        <tr>
            <th class="tableexport-empty">Name</th>
            <th>Position</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="tableexport-empty">Thor Walton</td>
            <td>Regional Director</td>
            <td>45</td>
            <td>$98,540</td>
        </tr>
        <tr>
            <td>Travis Clarke</td>
            <td class="tableexport-empty">Software Engineer</td>
            <td class="tableexport-ignore">31</td>
            <td>$275,000</td>
        </tr>
        <tr>
            <td>Suki Burks</td>
            <td>Office Manager</td>
            <td>22</td>
            <td>$67,670</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <td class="disabled"></td>
            <th class="tableexport-ignore">$441,210</th>
        </tr>
        </tfoot>
    </table>

    <p class="info">
        The <code>ignore CSS class selector</code> can be configured with the <code>ignoreCSS</code> prototype property.
        <br>
        The <code>empty CSS class selector</code> can be configured with the <code>emptyCSS</code> prototype property.
    </p>

    <br>

</main>

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/js-xlsx/dist/xlsx.core.min.js"></script>
<script type="text/javascript" src="../bower_components/blobjs/Blob.min.js"></script>
<script type="text/javascript" src="../bower_components/file-saverjs/FileSaver.min.js"></script>
<script type="text/javascript" src="../dist/js/tableexport.min.js"></script>
<script type="text/javascript" src="../assets/js/analytics.js"></script>
<script>

    var IgnoreRows = document.getElementById('ignore-rows-table');
    new TableExport(IgnoreRows, {
        ignoreRows: [0, 2]
    });
    // **** jQuery **************************
    //    $(IgnoreRows).tableExport({
    //        ignoreRows: [0, 2]
    //    });
    // **************************************

    var IgnoreCols = document.getElementById('ignore-cols-table');
    new TableExport(IgnoreCols, {
        ignoreCols: 1
    });
    // **** jQuery **************************
    //    $(IgnoreCols).tableExport({
    //        ignoreCols: 1
    //    });
    // **************************************

    var CustomCell = document.getElementById('ignore-cell-table');
    new TableExport(CustomCell);
    // **** jQuery **************************
    //    $(CustomCell).tableExport();
    // **************************************

</script>

</body>
</html>
